Adding vector graphics to the web

SVG is an XML-based language for describing vector images. It's basically markup, like HTML, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. SVG is for marking up graphics, not content. SVG defines elements for creating basic shapes, like and , as well as elements for creating more complex shapes, like and . More advanced SVG features include (transform colors using a transformation matrix), (animate parts of your vector graphic), and (apply a mask over the top of your image).

As a basic example, the following code creates a circle and a rectangle:

This creates the following output:

From the example above, you may get the impression that SVG is easy to hand code. Yes, you can hand code simple SVG in a text editor, but for a complex image this quickly starts to get very difficult. For creating SVG images, most people use a vector graphics editor like Inkscape or Illustrator. These packages allow you to create a variety of illustrations using various graphics tools, and create approximations of photos (for example Inkscape's Trace Bitmap feature.)

SVG has some additional advantages besides those described so far:

So why would anyone want to use raster graphics over SVG? Well, SVG does have some disadvantages:

Raster graphics are arguably better for complex precision images such as photos, for the reasons described above.

Note: In Inkscape, save your files as Plain SVG to save space. Also, please refer to this article describing how to prepare SVGs for the Web.